<template>
  <div class="audit-planInfo-view">

    <el-form
      :inline="true"
      label-position="right"
      label-width="120px"
      class="form-detail"
    >
      <el-row style="width:100%">

        <el-col :span="8">
          <el-form-item label="流程编号：">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="招商规划基本信息" />

    <!--        <infomation :datas="datas" is-audit></infomation>-->
    <el-form
      :inline="true"
      label-position="right"
      label-width="120px"
      class="form-detail"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="招商规划编号：">
            {{ datas.planInfo.planNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招商规划名称：">
            {{ datas.planInfo.planName }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="datas.planInfo.planType == 1 || datas.planInfo.planType == 3"
          :span="8"
        >
          <el-form-item
            label="招商地区："
            style="width: 100%;"
          >
            <area-list-view :areas="datas.planInfo.region" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="通用名："
            style="width: 100%;"
          >
            <span>{{ datas.planInfo.productPopularName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="商品名："
            style="width: 100%;"
          >
            <span>{{ datas.planInfo.productName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="包装规格："
            style="width: 100%;"
          >
            <span>{{ datas.planInfo.packSpecs }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="生产厂家："
            style="width: 100%;"
          >
            <span>{{ datas.planInfo.producer }}</span>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item v-if="datas.planInfo.planType == 1" label="招商模式：">-->
        <!--            {{ getLabel('plan_mode',datas.planInfo.planMode) }}-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col
          v-if="datas.planInfo.planType == 1 || datas.planInfo.planType == 3"
          :span="8"
        >
          <el-form-item label="终端价：">
            {{ datas.planInfo.terminalPrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="datas.planInfo.planType == 1"
          :span="8"
        >
          <el-form-item label="适用终端：">
            {{ getLabel('app_mode',datas.planInfo.terminalType) }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="datas.planInfo.planType == 1"
          :span="8"
        >
          <el-form-item label="准入模式：">
            {{ getLabel('access_mode',datas.planInfo.accessMode) }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="datas.planInfo.planType == 1"
          :span="8"
        >
          <el-form-item label="价格属性：">
            {{ getLabel('price_type',datas.planInfo.priceProperty) }}
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item v-if="datas.planInfo.planType == 1" label="指导交易价：">-->
        <!--            {{ datas.planInfo.guidingPrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="招商结束日期：">
            {{ dateFormat("yyyy-mm-dd",datas.planInfo.expireTime) }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="datas.planInfo.planType == 4"
          :span="8"
        >
          <el-form-item label="交易价：">
            {{ datas.planInfo.tradePrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}
          </el-form-item>
        </el-col>
        <!--
        <el-col :span="8">
          <el-form-item label="来源：">
            {{ datas.planInfo.planSource }}
          </el-form-item>
        </el-col>
        -->
        <el-col :span="8">
          <el-form-item label="关联市场准入：">
            <my-tooltip
              v-if="datas.planInfo.chanceId"
              :content="datas.planInfo.chanceName"
              @click="toChance"
            />
            <span v-else>无</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!--
      <el-row>
        <el-col
          v-if="datas.planInfo.planType != 4"
          :span="24"
        >
          <el-form-item label="其他描述：">
            <div v-if="datas.planInfo.remark">{{ datas.planInfo.remark }}</div>
            <div v-else>暂无</div>
          </el-form-item>
        </el-col>

        <el-col
          v-if="datas.planInfo.planType == 1 || datas.planInfo.planType == 3"
          :span="24"
        >
          <el-form-item label="其他附件：">
            <div v-if="datas.planInfo.files && datas.planInfo.files.length">
              <upload-file-view
                :file-arr="datas.planInfo.files"
                :is-upload="false"
              />
            </div>
            <div v-else>暂无</div>
          </el-form-item>
        </el-col>
      </el-row>
      -->
    </el-form>

    <template v-if="datas.planInfo.planType == 1">
      <item-title title="招商终端明细" />

      <terminal-detail
        is-audit
        :datas="datas"
      />
    </template>

    <template v-else-if="datas.planInfo.planType == 2">
      <item-title title="招商地区明细" />

      <areaView
        :list="datas.planDetail"
        :datas="datas.planInfo"
      />
    </template>

    <template v-else-if="datas.planInfo.planType == 3">
      <item-title title="招商地区明细" />

      <directAreaView
        :list="datas.planDetail"
        :datas="datas.planInfo"
      />
    </template>

    <template v-else-if="datas.planInfo.planType == 4" />

    <!-- 准入详情 -->
    <detail-drawer
      ref="chanceDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>
        <span>关联市场准入 - {{ datas?.planInfo?.chanceName }}</span>
      </template>
      <template #contents>

        <chance-info :id="datas?.planInfo.chanceId" />

      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {
  defineComponent,
  defineAsyncComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'PlaninfoView',
  components: {
    infomation: defineAsyncComponent(() =>
      import('../../../planManagement/finePlan/detail/modules/information.vue')
    ),
    terminalDetail: defineAsyncComponent(() =>
      import(
        '../../../planManagement/finePlan/detail/modules/terminalDetail.vue'
      )
    ),
    areaView: defineAsyncComponent(() =>
      import('../../../planManagement/signedPlan/detail/modules/areaView.vue')
    ),
    directAreaView: defineAsyncComponent(() =>
      import('../../../planManagement/directPlan/detail/modules/areaView.vue')
    ),
    chanceInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/business/chanceInfo.vue')
    ),
  },
  props: {
    detailData: {
      type: Object,
      default: {},
    },
  },
  setup(props, {}) {
    var data = reactive({
      datas: {
        planInfo: {},
        planDetail: [],
      },
      chanceDrawer: null,
    })

    const toChance = () => {
      data.chanceDrawer.open()
    }

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data && newval.data.planInfo) {
          console.log(newval.data)
          data.datas = newval.data
          data.datas.planDetail.forEach((a) => {
            if (data.datas.planInfo.planType == 2) {
              a.name = a.areaName
                ? a.cityName + '/' + a.areaName
                : a.cityName
                  ? a.cityName
                  : a.provinceName
            } else if (data.datas.planInfo.planType == 3) {
              a.name = a.streetName
                ? a.areaName + '/' + a.streetName
                : a.areaName
            }
          })
        }
      },
      { immediate: true, deep: true }
    )

    onMounted(() => {
      console.log(props)
    })

    return {
      ...toRefs(data),
      toChance,
    }
  },
})
</script>

<style scoped>
</style>
